<template>
<div class="mine">
  <top-bar title="我的" rightText="设置">
  </top-bar>

  <h2>管理我的账户</h2>
  <div class="me">
    <img src="//storage.360buyimg.com/i.imageUpload/78696168616966656e673131313131353636373937323133333639_big.jpg" alt="">
    <div>
      <!-- <div v-text="acount.username"></div> -->

      <div v-text="user"></div>

      <!-- <div v-text="this.$store.user"></div> -->
    </div>
  </div>

  <van-cell-group>
  <van-cell title="收货地址管理" value="管理我的收货地址" is-link @click="$router.push('/addrlist')" />
      <van-cell title="账户与安全" value="密码实名认证等管理" is-link />
      <van-cell title="退出登录" is-link @click="back" />
      <van-cell title="注册新账号" is-link @click="register" />
  </van-cell-group>

</div>
</template>

<script>
import {TopBar} from '@/components'
import {mapState} from 'vuex'
export default {
  name: 'Mine',
  components: {
    TopBar
  },
  data() {
    return{
      user: ''
    }
  },
  mounted() {
    this.user = localStorage.getItem('user')
  },
  computed: {
     ...mapState('user', ['acount']),
  },
  methods: {
    back() {
      localStorage.setItem('token', '')
      this.$router.push('/tologin')
      this.$nextTick(function(){
       this.user = localStorage.getItem('user')
      })
    },
    register() {
      this.$router.push('/register')
    }
  }
}
</script>

<style scoped lang="scss">
.mine {
  h2 {
    line-height: 4.4rem;
    margin-bottom: 3rem;
  }
  .me {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    font-size: 2rem;
    border: 1px solid red;
    margin: 1rem 1rem 2rem 1rem;

    border-radius: 1rem;
    height: 10rem;
    img {
      width: 5rem;
      height: 5rem;
    }
  }
}
</style>